<template>
    <div class="linChart" ref="chartContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
});

const chartContainer = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        legend: {
            left: 0,
            top: 10,
            // data: ["发电量", "上网电量"],
            itemStyle: {
                color: "rgba(255, 255, 255, 1)"
            },
            textStyle: {
                fontWeight: "lighter",
                color: "rgba(255, 255, 255, 1)",
                fontSize: 12,
            }
        },
        grid: {
            top: '5%',//生成的echarts图片和顶部的距离
            bottom: '10%',//echarts图片和底部的距离
            left: '1%',//echarts图片和左边的距离
            right: '5%',//echarts图片和右边的间距,
            containLabel: true,//当containLabel:为ture时，以上设置生效
        },
        xAxis: {
            type: 'category',
            data: props.data.data2.map((item: any) => item.date),
            axisTick: { show: false },
            name: '',
            nameTextStyle: {
                color: '#FFFFFF',
                fontWeight: "normal",
                fontSize: 8,
                verticalAlign: "top",
                lineHeight: 27
            },
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            },

        },
        yAxis: {
            type: 'value',
            // boundaryGap: true,
            axisTick: { show: false },
            name: '',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 10,
                align: "right",
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)"
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        series: [{
            data: props.data.data2.map((item: any) => item.value),
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
                color: '#FF5757'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                        {
                            offset: 0,
                            color: 'rgba(200, 130, 39, 0.5)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(200, 130, 39, 0.00)',
                        },
                    ],
                    global: false,
                },
            },

        },
        {
            // data: lineData.map((item: any) => item.value),
            data: props.data.data3.map((item: any) => item.value),
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
                color: '#2B8FFF'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                        {
                            offset: 0,
                            color: 'rgba(0, 187, 219, 0.50)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 187, 219, 0.00)',
                        },
                    ],
                    global: false,
                },
            },

        },
        {
            // data: lineData.map((item: any) => item.value),
            data: props.data.data4.map((item: any) => item.value),
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
                color: '#00E3FE'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                        {
                            offset: 0,
                            color: 'rgba(0, 187, 219, 0.50)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 187, 219, 0.00)',
                        },
                    ],
                    global: false,
                },
            },

        }
    ]

    };

    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => props.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.linChart {
    width: 100%;
    height: vh(220);
}
</style>